<template>
  <div>
    <h1>计算属性</h1>
    <!-- 插值渲染 -->
    <h1>{{ handleA() }}</h1>
    <!-- v-model无法实现绑定函数的返回值 -->
    <input type="text" v-model="handleA">
    <!-- 计算属性中的函数渲染页面 -->
    <p>{{b}}</p>
    <input type="text" v-model="b">
    <!-- 
        计算属性：就是不改变原数据的情况下对数据进行计算，排序等操作重新渲染到页面上
        特点：将函数当作变量去渲染
        
        methods和computed计算属性中定义的函数区别？
            1 渲染方式不一样，普通函数渲染需要加(),计算属性中的函数不带括号，以变量的形式去渲染
            2 computed定义的函数不会改变原数据，一般是专门用来计算的，并且是同步操作，必须有返回值
    -->
  </div>
</template>
<script>
export default {
  // 定义变量的地方
  data() {
    return {
      a: "hello",
    };
  },
  // 存放函数的地方
  methods: {
    handleA() {
      return this.a + " world";
    },
  },
  // 存放的函数必须有return,并且不能放异步函数。计算类的函数放到里面
  computed:{
    b(){
        return this.a + " world"
        // 模拟ajax异步请求---是同步不是异步
        // setTimeout(()=>{
        //     return this.a + " world"
        // },1000)
    }
  }
};
</script>